<template>
  <view>
    <view class="search-con ml30">
      <u-search placeholder="请输入名称检索商品" v-model="clothName" :showAction="false" @search="search"></u-search>
    </view>
    <view class="flex-align flex-between w mt35 mb25">
      <view style="width: 100%">
        <u-tabs
          :current="state"
          :list="tabs"
          @click="clickTabs"
          lineColor="#675000"
          :activeStyle="{
            color: '#675000',
            fontWeight: 'bold',
          }"
        ></u-tabs>
      </view>
      <!-- <view class="flex-align ml30 pl20" style="height: 40rpx; border-left: 1px solid #d9d9d9">
        <text class="mr5">筛选</text>
        <image src="@/static/images/sx.png" mode="scaleToFill" class="mt5" style="width: 26rpx; height: 26rpx" />
      </view> -->
    </view>
    <view class="w bg pad30 mb20" v-for="(item, idx) in list" :key="idx">
      <view @click="clickOrder(item)">
        <view class="flex-align flex-between mb44">
          <view class="flex-align">
            <text>SALTS</text>
            <!-- <u-icon name="arrow-right" color="#999" size="16" class="ml10"></u-icon> -->
          </view>
          <text class="color-primary" v-if="item.state == 3">待收货</text>
        </view>
        <view class="flex-align goods mb30" v-for="(v, i) in item.orderDetails" :key="i">
          <image :src="v.imgUrl" mode="scaleToFill" />
          <view class="info ml30">
            <view class="line2">{{ v.skuName }}</view>
            <view class="flex-between color-info f13 mt10 mb40">
              <text class="">{{ v.skuColor }}色 {{ v.skuSpec }}</text>
              <text class="">x{{ v.purchaseNum }}</text>
            </view>
            <view class="">
              <text>￥</text>
              <text class="f16">{{ v.skuPayPrice }}</text>
            </view>
          </view>
        </view>
        <view class="pad30 flex-between flex-align" style="background-color: #f5f5f5" v-if="state == 5">
          <view>
            <text>·派送中</text>
            <text class="color-info ml50">包裹正在等待揽收</text>
          </view>
          <u-icon name="arrow-right" color="#999" size="16" class="ml10"></u-icon>
        </view>
      </view>
      <!-- -1已退款-2已取消0未付款1已付款2正在开单3分拣中4待配送5配送中6已完成 -->
      <view class="flex-align flex-between mt20">
        <view v-if="item.orderInfo.orderState != '0'"> 订单实付：¥ {{ item.orderInfo.payAmount }}</view>
        <text class="f16">￥{{ item.orderInfo.totalAmount }}</text>
        <view class="btn flex-center" @tap="payOrder(item.orderInfo.orderId)" v-if="item.orderInfo.orderState == '0'"
          >支付</view
        >
        <view class="btn flex-center" @tap="endShopping(item.orderInfo.orderId)" v-if="item.orderInfo.orderState == 5"
          >确认收货</view
        >
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { onLoad } from '@dcloudio/uni-app'
import homeApi from '@/api/homeApi'
import { ref } from 'vue'

const clothName = ref('')
const tabs: any = ref([
  { name: '全部', type: 0 },
  { name: '待付款', type: 1 },
  { name: '待发货', type: 2 },
  { name: '待收货', type: 3 },
  { name: '退款/售后', type: 4 },
])
const list: any = ref([])

onLoad((e: any) => {
  state.value = String(e.state)
  getOrderList()
})
const state = ref('0')
const getOrderList = () => {
  homeApi
    .getOrderList({
      userId: uni.getStorageSync('userId'),
      state: state.value,
      clothName: clothName.value,
    })
    .then((res: any) => {
      list.value = res.data
    })
}

const search = () => {
  list.value = []
  getOrderList()
}

const clickTabs = (item: any) => {
  state.value = item.type
  list.value = []
  getOrderList()
}
const clickOrder = (item: any) => {
  uni.navigateTo({
    url: `/my/orderInfo?orderId=${item.orderInfo.orderId}`,
  })
}
/* 确认收货 */
const endShopping = (orderId: number) => {
  uni.showModal({
    title: '提示',
    content: '确认收货吗？',
    success: (res) => {
      if (res.confirm) {
        homeApi
          .updateOrderStatus({
            userId: uni.getStorageSync('userId'),
            orderId,
            state: 6,
          })
          .then((res: any) => {
            if (res.success) {
              uni.showToast({
                title: '确认收货成功',
                icon: 'none',
              })
              getOrderList()
            }
          })
      }
    },
  })
}
/* 支付 */
const payOrder = (orderId: number) => {
  uni.showModal({
    title: '提示',
    content: '确认支付吗？',
    success: (res) => {
      if (res.confirm) {
        homeApi
          .updateOrderStatus({
            userId: uni.getStorageSync('userId'),
            orderId,
            state: 1,
          })
          .then((res: any) => {
            if (res.success) {
              uni.showToast({
                title: '支付成功',
                icon: 'none',
              })
              getOrderList()
            }
          })
      }
    },
  })
}
</script>

<style>
page {
  padding-top: calc(var(--status-bar-height) + 30px);
  background-color: #f7f7f7;
}
</style>

<style lang="scss" scoped>
.btn {
  width: 160rpx;
  height: 72rpx;
  border: 1px solid #999999;
}

.search-con {
  width: 70%;
}

.goods {
  image {
    width: 200rpx;
    height: 200rpx;
  }

  .info {
    width: 400rpx;
  }
}
</style>
